<template>
  <div class="context-left" :class="{ collapsed: collapsed }">
    <!-- 左侧标签页 -->
    <div class="left-tabs">
      <div
        v-for="tab in ['模型', '图纸', '地理信息']"
        :key="tab"
        :class="['left-tab-item', { active: activeTab === tab }]"
        @click="activeTab = tab"
      >
        {{ tab }}
      </div>
    </div>

    <!-- 模型标签页内容 -->
    <div v-show="activeTab === '模型'" class="left-content">
      <div id="stencil"></div>
    </div>

    <!-- 图纸标签页内容 -->
    <div v-show="activeTab === '图纸'" class="left-content">
      <div class="create-drawing">
        <h3>创建图纸</h3>
        <div class="drawing-item">
          <el-button size="small" type="primary" @click="handleCreateDrawing">新建图纸</el-button>
        </div>
        <div class="drawing-item">
          <el-button size="small">导入图纸</el-button>
        </div>
        <div class="drawing-list">
          <h4>最近图纸</h4>
          <div
            v-for="drawing in drawings"
            :key="drawing.id"
            class="drawing-list-item"
            @click="handleSwitchDrawing(drawing.id)"
            @contextmenu="handleDrawingContextMenu($event, drawing.id)"
          >
            <div class="drawing-name">{{ drawing.name }}</div>
            <div class="drawing-date">{{ drawing.date }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 地理信息标签页内容 -->
    <div v-show="activeTab === '地理信息'" class="left-content">
      <div class="geo-info">
        <h3>地理信息</h3>
        <p>地理信息模块正在开发中...</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// Props
interface Props {
  collapsed: boolean
  drawings: Array<{
    id: number
    name: string
    date: string
    active: boolean
    canDelete?: boolean
  }>
}

// Emits
interface Emits {
  (e: 'create-drawing'): void
  (e: 'switch-drawing', id: number): void
  (e: 'drawing-context-menu', event: MouseEvent, id: number): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 左侧活动标签页
const activeTab = ref('模型')

// 事件处理
const handleCreateDrawing = () => {
  emit('create-drawing')
}

const handleSwitchDrawing = (id: number) => {
  emit('switch-drawing', id)
}

const handleDrawingContextMenu = (event: MouseEvent, id: number) => {
  emit('drawing-context-menu', event, id)
}
</script>

<style lang="scss" scoped>
.context-left {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 240px;
  height: 100%;
  border-right: none;
  transition: opacity 0.3s ease;

  &.collapsed {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
  }

  .left-tabs {
    position: relative;
    z-index: 10;
    display: flex;
    width: 100%;
    height: 40px;
  }

  .left-tab-item {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background-color: #e6e9ed;
    }

    &.active {
      background-color: #fff;
      border-bottom: 2px solid #409eff;
    }
  }

  .left-content {
    position: relative;
    z-index: 5;
    height: calc(100% - 80px);
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid #dfe3e8;

    /* 自定义滚动条样式 */
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 3px;

      &:hover {
        background: #a8a8a8;
      }
    }
  }

  .create-drawing {
    padding: 16px;

    h3 {
      margin: 0 0 16px 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }

    h4 {
      margin: 20px 0 12px 0;
      font-size: 14px;
      font-weight: 500;
      color: #606266;
    }

    .drawing-item {
      margin-bottom: 12px;

      .el-button {
        width: 100%;
      }
    }

    .drawing-list-item {
      display: flex;
      flex-direction: column;
      padding: 12px;
      margin-bottom: 8px;
      cursor: pointer;
      background-color: #f8f9fa;
      border-radius: 4px;
      transition: background-color 0.2s;

      &:hover {
        background-color: #e9ecef;
      }

      .drawing-name {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
        margin-bottom: 4px;
      }

      .drawing-date {
        font-size: 12px;
        color: #909399;
      }
    }
  }

  .geo-info {
    padding: 16px;

    h3 {
      margin: 0 0 16px 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 14px;
      color: #909399;
    }
  }
}
</style>
